<template>
  <a-space direction='vertical' style='display: flex'>
    <a-card>
      <a-upload-dragger
        name='file'
        :multiple='true'
        :action='uploadUrl'
        :headers='uploadHeaders'
        @change='handleChange'
      >
        <p class='ant-upload-drag-icon'>
          <a-icon type='inbox' />
        </p>
        <p class='ant-upload-text'>
          单击或拖动文件到此区域以上载
        </p>
      </a-upload-dragger>
    </a-card>
    <a-card :loading='listLoading'>
      <a-space size='large' direction='vertical'>

        <a-empty  v-if='!list.length'/>

        <a-row type='flex' justify='center' align='stretch'  :gutter="[16,16]" v-if='list.length'>
          <a-col  :xl='4' :lg='4' :md='6' :sm='8' :xs='8' v-for='(item,index) in list' :key='index'>
            <a-card hoverable>

              <template slot="actions" class="ant-card-actions">
                <a-button type="link" icon='link' @click='copyPath(item.path)'>
                  地址
                </a-button>
                <a-popconfirm title="是否确认删除？" ok-text="确认" cancel-text="取消">
                  <a-button type="link" icon='delete'>
                    删除
                  </a-button>
                </a-popconfirm>
              </template>
              <img
                slot="cover"
                style='height: 300px;max-width: 300px'
                :src='item.path'
                :alt='item.name'
              />
            </a-card>
          </a-col>
        </a-row>

        <a-row type='flex' justify='end'>
          <a-col>
            <a-pagination v-model="pagination.page" :total="pagination.total" :defaultPageSize='pagination.pageSize' showQuickJumper @change='pagination.onChange' />
          </a-col>
        </a-row>
      </a-space>
    </a-card>
  </a-space>

</template>

<script>

import { STable } from '@/components'

import storage from 'store'
import { ACCESS_TOKEN } from '@/store/mutation-types'


export default {
  name: 'uploads',
  components: { STable },
  data() {
    return {
      uploadUrl: '/api/upload',
      uploadHeaders: {
        Authorization: `Bearer ${storage.get(ACCESS_TOKEN)}`
      },

      // 查询参数
      filter: {
        username: {
          like: ''
        }
      },

      pagination: {
        page: 1,
        pageSize: 20,
        total: 0,
        onChange: this.pageChange
      },
      listLoading:false,
      list: [],
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    search() {
      // 刷新表格
      this.$refs.table.refresh()
    },
    getList() {
      this.listLoading = true
      this.$api.upload('', {page:this.pagination.current}).then(res => {

        this.pagination.page = res._meta.currentPage
        this.pagination.pageSize = res._meta.perPage
        this.pagination.total = res._meta.totalCount

        this.list = res.items

        this.listLoading = false
      }).catch((err) => {
        this.listLoading = false
      })
    },
    pageChange(page, pageSize) {
      this.pagination.current = page
      this.getList();
    },
    handleChange(info) {
      const status = info.file.status
      if (status !== 'uploading') {
        console.log(info.file, info.fileList)
      }
      if (status === 'done') {
        this.$message.success(`${info.file.name} file uploaded successfully.`)
        this.pagination.current = 1;
        this.getList()
      } else if (status === 'error') {
        this.$message.error(`${info.file.name} file upload failed.`)
      }
    },
    onDrawerClose(){
      this.editVisible = false
    },
    copyPath(path){
      this.$copyText(path).then( (e) => {
        this.$message.success(`地址已复制`)
      },  (e) =>  {
        alert('Can not copy')
        this.$message.error(`复制失败`)
      })
    }
  }
}
</script>

<style scoped>
.item{
  cursor: pointer;
  height: 250px;
  box-shadow: 0 0 10px 0 rgb(0 0 0 / 20%);
}
.item:hover{

}
</style>